<template>
    <div style="display:flex;">
        <leftTree ref="leftTree"
                  code="bpm"
                  @nodeClick="treeSelect"
                  style="min-width: 200px;"
        ></leftTree>
        <div style="padding:10px;width:calc(100% - 250px);">
            <div>
                <el-form :mode="queryParams" :inline="true"
                         @submit.native.prevent
                >
                    <el-form-item label="名称 " desc="" prop="name"
                                  disabled="false">
                        <el-input size="small" placeholder="名称" v-model="queryParams.name" clearable />
                    </el-form-item>
                    <el-form-item label=" " desc="" prop="name"
                                  disabled="false">
                        <div>
                            <el-button type="primary " @click="()=>{
                             pageNum=1;
                             getInfoList();
                            }">查询
                            </el-button>
                        </div>
                    </el-form-item>
                
                </el-form>
            </div>
            <div style="padding-top:10px;padding-bottom:10px;">
                <el-button size="small" type="primary" plain @click="triggerModify">新增</el-button>
            </div>
            <el-table :data="dataList" width="100%" border size="small">
                <el-table-column
                        label="编号" prop="id" width="55px" align="center">
                    <template slot-scope="scope">
                        <tip-content v-model="scope.row.id" :overflow="1"></tip-content>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作" prop="操作" width="55px">
                    <template slot-scope="scope">
                        <el-popover
                                placement="top-start"
                                title="操作"
                                width="400"
                                trigger="hover"
                        >
                            <div>
                                
                                
                                <el-button type="text"
                                           size="mini"
                                           icon="el-icon-edit"
                                           @click="()=>{  go2modify(scope.row)  }"
                                >修改
                                </el-button>
                                
                                <el-button type="text"
                                           size="mini"
                                           @click="()=>{  triggerStartRumtimepipline(scope.row)  }"
                                >开启流程
                                </el-button>
                                
                                <!--   <el-button type="text"
                                              size="mini"
                                              @click="()=>{  triggerRumtimepiplineList(scope.row)  }"
                                   >流程列表
                                   </el-button>-->
                                <!-- <el-button type="text"
                                            size="mini"
                                            icon="el-icon-edit"
                                            @click="()=>{  triggerGoBpm(scope.row)  }"
                                 >流程图
                                 </el-button>
                                 <el-button type="text"
                                            size="mini"
                                            icon="el-icon-edit"
                                            @click="()=>{  triggerGoForm(scope.row)  }"
                                 >表单
                                 </el-button>-->
                                <el-button type="text"
                                           size="mini"
                                           icon="el-icon-delete"
                                           @click="handleDelete(scope.row)"
                                
                                >删除
                                </el-button>
                                <el-button type="text"
                                           size="mini"
                                           icon="el-icon-notebook-1"
                                           @click="openLog(scope.row)"
                                
                                >变更日志
                                </el-button>
                            </div>
                            <el-button
                                    slot="reference"
                                    type="text">操作
                            </el-button>
                        
                        </el-popover>
                    
                    </template>
                </el-table-column>
                
                <el-table-column
                        label="名称" prop="name">
                    <template slot-scope="scope">
                        <tip-content v-model="scope.row.name" :overflow="1"></tip-content>
                    </template>
                </el-table-column>
                <el-table-column
                        label="描述" prop="describeInfo">
                    <template slot-scope="scope">
                        <tip-content v-model="scope.row.describeInfo" :overflow="1"></tip-content>
                    </template>
                </el-table-column>
            
            </el-table>
            <el-pagination
                    :background="true"
                    style="margin-top: 20px;"
                    :page-size="queryParams.pageSize"
                    :current-page.sync="queryParams.pageNum"
                    layout="prev, pager, next"
                    :total="total"
                    @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                    @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
  import * as bpnmApi from '@/apis/bpnm.api.js';
  
  import { getToken } from '@/utils/index.js';
  
  import mydialogplus from '@codegenarate/mydialogplus';
  import { formMethod } from '../../utils/formcommon';
  import { alertConfirm, alertWithPaylod } from '@/utils/alertUtil.js';
  
  export default {
    components: {
      leftTree: () => import('@/views/bnpmList/components/leftTree.vue'),
      tipContent: () => import('@/components/tipcontent/index.vue'),
    },
    data() {
      return {
        api: bpnmApi,
        queryParams: {
          pageNum: 0,
          pageSize: 10,
        },
        total: 0,
        treeSelectData: undefined,
        dataList: [],
      };
    },
    mounted() {
      //this.initByDialog();
      this.$nextTick(() => {
        setTimeout(() => {
          console.log(' this.$refs[\'leftTree\']', this.$refs['leftTree']);
          this.$refs['leftTree'] && this.$refs['leftTree'].initByDialog();
        }, 100);
        
        
        //this.initByDialog();
      });
    },
    methods: {
      ...formMethod,
      async initByDialog() {
        this.getInfoList();
      },
      // 开启一个流程
      async triggerStartRumtimepipline(row) {
        await alertConfirm('确定要开启流程？');
        var result = await bpnmApi.startDevelopment({ bpmnId: row.id });
        alertWithPaylod(result);
        
      },
      //  查看流程裂 列表
      triggerRumtimepiplineList(row) {
      
      },
      
      async getInfoList() {
        var result = await bpnmApi.getList(this.queryParams);
        this.dataList = result.data && result.data || [];
        
        this.total = result && result.data.total;
        
        console.log('this.dataList', this.dataList);
      },
      
      treeSelect(nodeData) {
        console.log('treeSelect', nodeData);
        this.treeSelectData = nodeData;
        this.queryParams.classId = nodeData && nodeData.id;
        this.getInfoList();
      },
      /**
       * @description:  打开流程图
       * @params
       * @return
       */
      triggerGoBpm(row) {
        location.href = `/src/views/bnpmList/bnpm/index.html?bpmId=${row.id}`;
      },
      triggerGoForm(one) {
        mydialogplus({
          width: '1200px',
          title: `【${one && one.name}】配置表单`,
          data() {
            return {
              /*  节点ID	node_id	bigint			FALSE	FALSE	TRUE
                节点名称	node_name	varchar(50)	50		FALSE	FALSE	TRUE*/
              nodeId: one && one.id,
              nodeName: one && one.name,
            };
          },
          components: {
            modify: () => import('@/views/bnpmList/form/list.vue'),
          },
        });
      },
      
      /**
       * @description :  到修改界面  可 修改 表单，流程
       * @params
       * @return
       */
      async go2modify(row) {
        location.href = `/src/views/bnpmList/modify/index.html?authToken=${getToken()}&bpmId=${row.id}`;
      },
      
      async triggerModify(row) {
        var self = this;
        var classId = (row && row.classId) ? row.classId : self.treeSelectData && self.treeSelectData.id;
        var className = (row && row.className) ? row.className : self.treeSelectData && self.treeSelectData.name;
        var result = await mydialogplus({
          title: '新增流程',
          width: '500px',
          data() {
            return {
              ...row,
              classId,
              className,
            };
          },
          
          components: {
            modify: () => import('@/views/bnpmList/components/modifyForm.vue'),
          },
          
        });
      },
    },
  };
</script>
